<template>
    <div>
        <el-form :model="LoginForm" ref="form" size="normal" class="login-container">
            <h3 class="login-title">办公系统登录</h3>
            <el-form-item label="账号">
                <el-input class="loginText" type="text" v-model="LoginForm.user" placeholder="请输入账号" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input class="loginText" type="password" v-model="LoginForm.password" placeholder="请输入密码" clearable></el-input>
            </el-form-item>
            <el-form-item label="验证" size="normal">
                <el-input class="loginText" type="text" v-model="LoginForm.code" placeholder="点击图片更换验证码" size="normal" ></el-input>
                <img :src="captureUrl" alt="">
            </el-form-item>
            <el-checkbox class="loginRemember" v-model="checked" label="记住我" :indeterminate="false"></el-checkbox>
            <el-button class="loginBtn" type="primary" size="default" >登录</el-button>
        </el-form>
        
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data(){
            return{
                LoginForm:{
                    user: 'hhz',
                    password: '123456'
                },
                captureUrl: "",
                checked: true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login-container{
        width: 350px;
        margin: 200px auto;
        border: 1px solid #eaeaea;
        border-radius: 10px;
        padding: 15px 35px 15px 35px;
        box-shadow: 0 0 25px #cac6c6;
        background-clip: border-box;
    }
    .loginText{
        width: 80%;
    }
    .loginRemember{
        width: 50%;
        display: block;
        margin: 0 0 15px 0;
    }
    .loginBtn{
        width: 92%;
    }
    .login-title{
        color: royalblue;
        text-align: center;
        margin: 30px 0 30px 0;
    }
</style>